<template>
	<view>
		<!-- 动态内容模块 -->
		<view class="dynamicContent">
			<view class="tabs">
				<view v-for="(item, index) in tabs" :key="index" class="tab-item"
					:class="{ active: activeIndex === index }" @click="switchTab(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="tab-content">
				<view v-show="activeIndex === 0">
					<!-- 第一个标签页的内容 -->
					<cc-couponList :subscript="0" :colors="colors" :couponList="dynamicList" @itemClick="jumpNext"></cc-couponList>
					</view>
				</view>
				<view v-show="activeIndex === 1">
					<!-- 第二个标签页的内容 -->
					<cc-couponList :subscript="1" :colors="colors" :couponList="dynamicList" @itemClick="jumpNext"></cc-couponList>
					</view>
				</view>
				<view v-show="activeIndex === 2">
					<!-- 第三个标签页的内容 -->
					<cc-couponList :subscript="2" :colors="colors" :couponList="dynamicList" @itemClick="jumpNext"></cc-couponList>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						name: '未使用'
					},
					{
						name: '已使用'
					},
					{
						name: '已过期'
					},
				],
				activeIndex: 0 ,// 默认激活的标签页索引
				colors: '#e54d42',
				dynamicList: [], // 优惠卷列表
			};
		},
		methods: {
			switchTab(index) {
				this.activeIndex = index;
			},
			jumpNext(item) {
				uni.showModal({
					title: '点击优惠券条目',
					content: '点击优惠券条目 = ' + JSON.stringify(item)
				})
			}
		},
		onLoad() {
			// 获取优惠卷信息
			const token = uni.getStorageSync('Token')
			const uid = uni.getStorageSync('UserInfo').id
			console.log("uid",uid);
			uni.request({
				url:'http://localhost/dev-api/system/coupons/infoByUid/' + uid,
				method: 'GET',
				header: {
					'Authorization': 'Bearer ' + token,
				},
				success: (res) => {
					if (res.statusCode === 200) {
						this.dynamicList = res.data.rows;
						// console.log("res...............................");
						console.log("this.dynamicList",this.dynamicList);
					} else {
						console.log("请求失败");
						
					}
				},
				fail: (err) => {
					console.log("请求失败");
				},
			});
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	/* 页面容器 */
	.container {
		display: flex;
		flex-direction: column;
	}
	/* 动态内容模块 */
	.dynamicContent {
		width: 375px;
		/* height: 310px; */
	}
	
	.tabs {
		display: flex;
		justify-content: space-around;
	}
	
	.tab-item {
		width: 57px;
		padding-top: 10px;
		text-align: center;
	}
	
	.active {
		color: #ff0000;
		border-bottom: 2px solid #ff0000;
	}
</style>
